<template>
  <div>
    <el-page-header @back="goBack" content="教室详情">
      <template slot="title">
        <el-link type="primary">教室列表</el-link>
      </template>
    </el-page-header>

    <el-row>
      <el-col :span="14">
        <el-card class="classroom-content">
          <el-tag type="danger">教室名：{{classroomContent.classroomName}}</el-tag>
          <el-divider></el-divider>
          <div>
            <div class="inner-content" v-if="classroomContent.type==0">教室类型：小型教室</div>
            <div class="inner-content" v-else-if="classroomContent.type==1">教室类型：中型教室</div>
            <div class="inner-content" v-else="classroomContent.type==2">教室类型：大型教室</div>
            <div class="inner-content">座位数：{{classroomContent.content}}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-tooltip class="item" effect="dark" content="马上预约" placement="top-start">
          <el-button @click="toOrder" icon="el-icon-thumb" class="toOrder" type="primary"></el-button>
        </el-tooltip>
      </el-col>

      <el-col :span="24" :offset="2">
        <el-tooltip class="item" effect="dark" content="查看所有信息" placement="right">
          <el-button @click="getAllApplyHistoryList" icon="el-icon-reading" type="primary" circle></el-button>
        </el-tooltip>
        <el-select v-model="searchType" clearable placeholder="查询类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <span class="serach">
          <el-date-picker
            v-model="searchDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :default-time="['8:00:00', '10:00:00']"
          ></el-date-picker>

          <el-button
            @click="toSearch"
            icon="el-icon-search"
            type="success"
            class="search-button"
            round
          >搜索</el-button>
        </span>
      </el-col>
      <el-col :span="15">
        <el-card class="orderList-outside">
          <el-alert title="教室使用情况列表" type="success" effect="dark" center :closable="false"></el-alert>
          <el-col :span="24">
            <el-table stripe border height="400" :data="reviewerHistory" style="width: 100%">
              <el-table-column align="center" prop="applicant" label="申请人 / 教师" width="180"></el-table-column>
              <el-table-column align="center" label="用途">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <div v-html="scope.row.usedReason">></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="beginTime" sortable label="开始时间"></el-table-column>
              <el-table-column align="center" prop="endTime" sortable label="结束时间"></el-table-column>
            </el-table>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 4,
      total: 10,
      reviewerHistory: [],
      searchDate: [],
      classroomContent: {
        classroomName: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      options: [
        {
          value: "1",
          label: "按课程查询"
        },
        {
          value: "2",
          label: "按预定查询"
        }
      ],
      searchType: ""
    };
  },
  methods: {
    goBack() {
      this.$router.push("/classroom");
    },
    toOrder() {
      // 解析时间
      let beginTime;
      let endTime;
      let name = this.$route.query.name;
      let type = this.classroomContent.type;
      if (this.searchDate.length == 0) {
        return this.$router.push(`/apply?name=${name}&type=${type}`);
      }
      beginTime = JSON.parse(JSON.stringify(this.searchDate[0]));
      endTime = JSON.parse(JSON.stringify(this.searchDate[1]));
      this.$router.push(
        `/apply?name=${name}&beginTime=${beginTime}&endTime=${endTime}&type=${type}`
      );
    },

    getAllApplyHistoryList() {
      let name = this.$route.query.name;
      console.log(name);
      this.$http
        .get("apply/noAuthorize/all-apply-course-history", {
          params: {
            classroomName: name
          }
        })
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 1) {
            let { pageResult } = resp.data.data;
            this.reviewerHistory = pageResult;
          }
        })
        .catch(resp => {});
    },

    toSearch() {
      // 解析时间
      let beginTime;
      let endTime;
      if (this.searchDate.length == 0 || this.searchDate == null) {
        return this.$message.info("请先选择合适时间");
      }
      beginTime = JSON.parse(JSON.stringify(this.searchDate[0]));
      endTime = JSON.parse(JSON.stringify(this.searchDate[1]));
      // 获取课程名
      let name = this.$route.query.name;

      if (this.searchType == "1") {
        this.queryCourseHistory(beginTime, endTime, name);
      } else if (this.searchType == "2") {
        this.queryReviewHistory(beginTime, endTime, name);
      } else {
        this.$message.warning("请先选择查询类型");
      }
    },

    queryCourseHistory(beginTime, endTime, name) {
      this.$http
        .get("course/noAuthorize/history", {
          params: {
            beginTime: beginTime,
            endTime: endTime,
            name: name
          }
        })
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 404) {
            this.reviewerHistory = [];
            return this.$message.success("当前时间段中没有课程被 使用 ....");
          } else if (code == 1) {
            let { pageResult } = resp.data.data;
            this.$message.error("一共 " + pageResult.total + " 教室使用记录");
            this.reviewerHistory = pageResult.courseApplyList;
            return;
          }
          this.$message.error(msg);
        })
        .catch(resp => {});
    },
    queryReviewHistory(beginTime, endTime, name) {
      this.$http
        .get("/apply/noAuthorize/history", {
          params: {
            beginTime: beginTime,
            endTime: endTime,
            name: name
          }
        })
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 404) {
            this.reviewerHistory = [];
            return this.$message.success("当前时间段中没有被 预定 ....");
          } else if (code == 1) {
            let { pageResult } = resp.data.data;
            this.$message.error("一共 " + pageResult.total + " 教室使用记录");
            this.reviewerHistory = pageResult.applyReportList;
            return;
          }
          return this.$message.error(msg);
        })
        .catch(resp => {});
    },
    getClassDetails() {
      let name = this.$route.query.name;
      this.$http
        .get(`classroom/noAuthorize/queryAvailableClassroom/${name}`)
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.classroomContent = data.classroom;
          }
        })
        .catch(resp => {});
    }
  },
  created() {
    this.getAllApplyHistoryList();
    this.getClassDetails();
  }
};
</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.classroom-content {
  margin-left: 200px;
  background-color: #e6a23c;
  width: 250px;
  height: 250px;
  border-radius: 100px;
  box-shadow: 15px 15px 15px #888888;
  margin-top: 40px;
  margin-bottom: 30px;
  .el-tag {
    margin-left: 30px;
  }
  .el-tag--danger {
    font-size: 20px;
  }
  .inner-content {
    margin-top: 10px;
    margin-left: 30px;
  }
  .el-tag--danger {
    margin-top: 35px;
  }
}
.toOrder {
  margin-top: 140px;
  margin-left: 120px;
}
.orderList-outside {
  margin-left: 30px;
  margin-top: 20px;
  width: 900px;
}

.search-button {
  margin-left: 20px;
}
.el-pagination {
  margin-top: 20px;
  margin-left: 355px;
}
.el-page-header {
  margin-top: 20px;
}
.serach {
  margin-left: 20px;
}
.el-select {
  width: 150px;
  margin-left: 30px;
}
</style>